 <template>
	<div class="menuNav">
 <!-- 个人 start-->
	<div class="menuContent" v-show="tabView==1">
		<ul>
			<li v-for="(item,index) in menuList" :key="index" :class="[
				{'menu-level-one':item.menuLevel==1},
				{'menu-level-two':item.menuLevel==2},
				{'active':item.menuLevel==1 && activebar==item.routerName},
				{'active':item.menuLevel==2 && activebar==item.routerName},
			]">
				<!-- 一级菜单 -->
				<router-link v-if="item.menuLevel==1" :to="'/'+item.routerName">
					<i v-if="activebar==item.routerName"><img :src="item.iconActive" alt=""></i>
					<i v-else><img :src="item.iconClass" alt=""></i>
					<span v-show="isShow">{{ item.name }}</span>
				</router-link>

				<!-- 二级菜单 -->
				<router-link v-if="item.menuLevel==2" :to="'/'+item.routerName">
					<i v-if="activebar==item.routerName"><img :src="item.iconActive" alt=""></i>
					<i v-else><img :src="item.iconClass" alt=""></i>
					<span v-show="isShow">{{ item.name }}</span>
				</router-link>

				<ul v-if="item.menuLevel==2" class="secondLevel" style="display: none;">
					<li v-for="(child,childIndex) in item.children" :key="childIndex" :class="{'cactive':activebar==child.routerName}">
						<router-link :to="'/'+child.routerName">
							<span v-show="isShow">{{ child.name }}</span>
						</router-link>
					</li>
				</ul>
			</li>
			<!-- <div :class="{'slide-icon-active':isShow == false}" class="slide-icon" @click="showToggle()"></div> -->
			<div class="slide-icon" @click="showToggle()">
				<i v-if="isShow == false"><img :src="slideActive" alt=""></i>
				<i v-if="isShow == true"><img :src="slideClass" alt=""></i>
			</div>
		</ul>
	</div>
<!-- 个人 end-->

<!-- 管理员 start-->
	<div class="menuContent" v-show="tabView==2">
		<ul>
			<li v-for="(list,listIndex) in menuLists" :key="listIndex" :class="[
				{'menu-level-one':list.menuLevel==1},
				{'menu-level-two':list.menuLevel==2},
				{'active':list.menuLevel==1 && activebar==list.routerName},
				{'active':list.menuLevel==2 && activebar==list.routerName},
			]">
				<!-- 一级菜单 -->
				<router-link :to="'/'+list.routerName" v-if="list.menuLevel==1">
					<i v-if="activebar==list.routerName"><img :src="list.iconActive" alt=""></i>
					<i v-else><img :src="list.iconClass" alt=""></i>
					<span v-show="isShow">{{ list.name }}</span>
				</router-link>

				<!-- 二级菜单 -->
				<router-link v-if="list.menuLevel==2" :to="'/'+list.routerName" >
					<i v-if="activebar==list.routerName"><img :src="list.iconActive" alt=""></i>
					<i v-else><img :src="list.iconClass" alt=""></i>
					<span v-show="isShow">{{ list.name }}</span>
				</router-link>

				<ul v-if="list.menuLevel==2" class="secondLevel" style="display: none;">
					<li v-for="(child,chIndex) in list.children" :key="chIndex" :class="{'cactive':activebar==child.routerName}">
						<router-link :to="'/'+child.routerName">
							<span v-show="isShow">{{ child.name }}</span>
						</router-link>
					</li>
				</ul>
			</li>
			<!-- <div :class="{'slide-icon-active':isShow == false}" class="slide-icon" @click="showToggle()"></div> -->
			<div class="slide-icon" @click="showToggle()">
				<i v-if="isShow == false"><img :src="slideActive" alt=""></i>
				<i v-if="isShow == true"><img :src="slideClass" alt=""></i>
			</div>
		</ul>
	</div>
<!-- 管理员 end-->
	</div>
</template>
<script type="text/javascript">
	import store from '@/vuex/menuStore'
	import {mapState,mapMutations} from 'vuex'
	export default{
		data(){
			return{
				slideActive: '../../static/image/icon-menu.png',
				slideClass:'../../static/image/icon-menu-toggle.png',
				// liActive:0,
				isShow:true,
				tabView:0,
				index:'',
				selectItem:0,
				// 个人
				menuList:[
					{
						name : '首页',
						menuLevel : 1,
						routerName : 'home',
						iconClass : '../../static/image/icon-1.png',
						iconActive:'../../static/image/icon-active-1.png',
					},
					// {
					// 	name : '人机训练',
					// 	menuLevel : 1,
					// 	routerName : 'human-machine-training',
					// 	iconClass : '../../static/image/icon-2.png',
					// 	iconActive:'../../static/image/icon-active-2.png',
					// },
					{
						name:'我的课程',
						menuLevel: 2,
						routerName : 'markSimos',
						iconClass : '../../static/image/icon-3.png',
						iconActive:'../../static/image/icon-active-3.png',
						children:[
							{
								name:'markSimos',
								routerName:'sign-upCourse',
								backgroundColor:'#e76b5f',
							},
							// {
							// 	name:'changeMan',
							// 	routerName:'changeMan',
							// 	backgroundColor:'#999999',
							// },
						]

					},
					// {
					// 	name : '我的比赛',
					// 	menuLevel : 1,
					// 	routerName : 'myGame',
					// 	iconClass : '../../static/image/icon-4.png',
					// 	iconActive:'../../static/image/icon-active-4.png',
					// },
					// {
					// 	name : '攻略百科',
					// 	menuLevel : 1,
					// 	routerName : 'raiders-encyclopedia',
					// 	iconClass : '../../static/image/icon-5.png',
					// 	iconActive:'../../static/image/icon-active-5.png',
					// },
					// {
					// 	name : '高手回顾',
					// 	menuLevel : 1,
					// 	routerName : 'master-review',
					// 	iconClass : '../../static/image/icon-6.png',
					// 	iconActive:'../../static/image/icon-active-6.png',
					// },
					// {
					// 	name : '历史成绩',
					// 	menuLevel : 1,
					// 	// routerName : '',
					// 	iconClass : '../../static/image/icon-7.png',
					// 	iconActive:'../../static/image/icon-active-7.png',
					// },
					// {
					// 	name : '测试',
					// 	menuLevel : 1,
					// 	routerName : 'test',
					// 	iconClass : '../../static/image/icon-8.png',
					// 	iconActive:'../../static/image/icon-active-8.png',
					// },
					// {
					// 	name : '线上指导',
					// 	menuLevel : 1,
					// 	routerName : 'online-instruction',
					// 	iconClass : '../../static/image/icon-9.png',
					// 	iconActive:'../../static/image/icon-active-9.png',
					// },
					
				],
				// 管理员
				menuLists:[
					{
						name : '首页',
						menuLevel : 1,
						routerName : 'adminHome',
						iconClass : '../../static/image/icon-1.png',
						iconActive:'../../static/image/icon-active-1.png',
					},
					// {
					// 	name : '赛事管理',
					// 	menuLevel : 1,
					// 	// routerName : '',
					// 	iconClass : '../../static/image/icon-2.png',
					// 	iconActive:'../../static/image/icon-active-2.png',
					// },
					{
						name : '课程管理',
						menuLevel : 2,
						routerName : 'course-management',
						iconClass : '../../static/image/icon-3.png',
						iconActive:'../../static/image/icon-active-3.png',
						children:[
							{
								name:'MarkSimos',
								routerName:'course-management',
							},
							// {
							// 	name:'ChangeMan',
							// 	routerName:'course-details-page',
							// },
						]
					},
					// {
					// 	name : '攻略百科',
					// 	menuLevel : 1,
					// 	routerName : 'raiders-encyclopedia',
					// 	iconClass : '../../static/image/icon-5.png',
					// 	iconActive:'../../static/image/icon-active-5.png',
					// },
					
					// {
					// 	name : '测试管理',
					// 	menuLevel : 1,
					// 	routerName : 'test-management',
					// 	iconClass : '../../static/image/icon-4.png',
					// 	iconActive:'../../static/image/icon-active-4.png',
					// },
					{
						name : '学员管理',
						menuLevel : 1,
						routerName : 'student-management',
						iconClass : '../../static/image/icon-12.png',
						iconActive:'../../static/image/icon-active-12.png',
					},
					
					// {
					// 	name : '账号资料',
					// 	menuLevel : 1,
					// 	routerName : 'administrator-modifiy',
					// 	iconClass : '../../static/image/icon-6.png',
					// 	iconActive:'../../static/image/icon-active-6.png',
					// },
					// {
					// 	name : '公告管理',
					// 	menuLevel : 1,
					// 	routerName : 'announcement-management',
					// 	iconClass : '../../static/image/icon-7.png',
					// 	iconActive:'../../static/image/icon-active-7.png',
					// },
					// {
					// 	name : '客服管理',
					// 	menuLevel : 1,
					// 	routerName : 'customer-service',
					// 	iconClass : '../../static/image/icon-8.png',
					// 	iconActive:'../../static/image/icon-active-8.png',
					// },
					// {
					// 	name : '子管理员',
					// 	menuLevel : 1,
					// 	routerName : 'subordinate-management',
					// 	iconClass : '../../static/image/icon-9.png',
					// 	iconActive:'../../static/image/icon-active-9.png',
					// },
				],
			}
		},
		methods: {
			//收缩展开菜单
			showToggle:function(){
				this.isShow = !this.isShow
				// if(this.isShow==true){
				// 	this.isShow==false;
				// }else{
				// 	this.isShow==true;
				// }
			},
			...mapMutations([
				'changeActivebar',
				'changeRouterTitle'
			]),
			test(params){
				console.log(params)
			}
		},
		computed:{
			...mapState({
				activebar:state=>state.activebar
			})
		},
		created(){//页面加载之前
			const uri = this.$route.name;
			this.changeActivebar(uri)
			const title = this.$route.meta.title;
			this.changeRouterTitle(title)
			//读取菜单配置
			// this.menuList = this.$menu;

		},
		mounted(){
			//页面加载完之后
			// let li=document.getElementsByTagName('li');
			// for(var i = 0 ; i < li.length ; i ++ ){
			// 	li[i].onmouseover=function() {
			// 		if(this.className!="active"){
			// 			this.childNodes[0].className="hover"
			// 		}
			// 	}
			// 	let childa=li[i].childNodes;
			// 	childa[0].onmouseout=function() {
			// 		if(this.className=="hover"){
			// 			this.className="router-link-exact-active router-link-active"
			// 		}
			// 	}
			// }
			//
			$(".menu-level-two>a").click(function(){
				$(this).next().stop(false,false).slideToggle(function(){
					if($(this).is(":visible")){
						$(".can-click").removeClass("icon-chevron-up");
					}else{
						$(".can-click").addClass("icon-chevron-up");
					}
				});
			  });
			  
			  console.log(JSON.parse(sessionStorage.getItem('login')))
			  let loginInfo = JSON.parse(sessionStorage.getItem('login'))
			  if  (loginInfo.userLevel) {
				  this.tabView = 2; //管理员
			  }else{
				  this.tabView = 1; //个人
			  }
		},
		watch:{
			$route(){
				const uri = this.$route.name;
				this.changeActivebar(uri)
				const title = this.$route.meta.title;
				this.changeRouterTitle(title)
			}
		},
		store
	}
</script>
